import { Card, Form, Input, Button, Image } from 'antd'
import './index.scss'
import { useState } from 'react'

const Login = () => {

  // Form表单样式相关
  const formItemLayout = {
    labelCol: {
      xs: { span: 14 },
      sm: { span: 5 },
    },
    wrapperCol: {
      xs: { span: 14 },
      sm: { span: 18 },
    },
  }

  // 用户基本信息管理
  const [userInfo, setUserInfo] = useState({})

  // 收集表单信息onFinish事件
  const onFinish = (formValue) => {
    console.log(formValue)
  }

  return (
    <Card className='login'>
      <header>登录</header>
      {/* 给表单绑定事件，点击提交后收集表单信息 onFinish*/}
      <Form style={{ paddingTop: '20px' }} {...formItemLayout} onFinish={onFinish}>

        <Form.Item
          className='myform'
          label="用户名"
          name="username"
          rules={[
            { required: true, message: '请输入用户名!' },
            { pattern: /^[A-Za-z0-9]{6,64}$/, message: '只能由大小写字母和数字组成，至少6位!' }
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          className='myform'
          label="密码"
          name="password"
          rules={[
            { required: true, message: '请输入密码!' },
            {
              pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?])[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{6,64}$/,
              message: '密码由大小写字母、数字、特殊字符组成，至少6位!'
            }
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          className='myform'
          label="验证码"
          name="captcha"
          rules={[
            { required: true, message: '请输入验证码!' },
            { pattern: /^\d*\.?\d+$/, message: '请输入正确的验证码!' }
          ]}
        >
          <div>
            <Input style={{ width: '140px', marginRight: '30px' }} />
            <Image width={110} src="src\assets\captcha.png" style={{ height: '40px' }} />
          </div>
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit" className='btn'>
            登录
          </Button>
        </Form.Item>

      </Form>

    </Card >
  )
}

export default Login